<template>
	<div id="MovieTab">
		<ul>
			<router-link tag="li" to="/movie/city">
				北京<i class="fa fa-caret-down"></i>
			</router-link>
			<router-link tag="li" to="/movie/now" class="font-color">
		      正在热映
			</router-link>
			<router-link tag="li" to="/movie/coming" class="font-color">
				即将上映
			</router-link>
			<router-link tag="li" to="/movie/search" >
			  <i class="fa fa-search" style="font-size: 25px;"></i>
			</router-link>
		</ul>
		<keep-alive>
		<router-view></router-view>
		</keep-alive>
	</div>
</template>

<script>
</script>

<style scoped>
	#MovieTab{
		padding-top: 50px;
	}
	ul{
		border-bottom: 2px solid #CCC;
	}
	li{
		display: inline-block;
		width: 25%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: bold;
		
	}
	.font-color{
		color: #666;
	}
	.router-link-active{
		color: #E54847;
		border-bottom: 2px solid #E54847;
	}
	.fa-caret-down{
		margin-left: 10px;
	}
</style>
